<template>
  <div class='front'>
        <el-alert title="纯前端代码生成器，主要是配合后端接口字段进行设计，字段自行输入"
              type="warning">
    </el-alert>
    <br>
    <el-form class="row-form"
             size="small"
             :model="actionParams"
             ref="actionParamsRef"
             :rules="actionParamsRules"
             label-width="120px"
             :inline="true">
      <el-form-item label="前台模块"
                    prop="frontModule">
        <el-input v-model="actionParams.frontModule"></el-input>
      </el-form-item>
      <el-form-item label="前台控制器"
                    prop="frontController">
        <el-input v-model="actionParams.frontController"></el-input>
      </el-form-item>
      <el-form-item label="接口地址标识"
                    prop="backController">
        <el-input v-model="actionParams.backController"></el-input>
      </el-form-item>
      <el-form-item label="描述关键字"
                    prop="descKeywords">
        <el-input v-model="actionParams.descKeywords"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning"
                   :loading="doLoading"
                   @click="doCreateCode">生成代码</el-button>
        <el-button @click="$refs.actionParamsRef.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格的列信息 -->
    <div class="table-bg">
      <el-table :data="allColumnsList"
                border>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="字段"
                         prop="name">
          <template slot-scope="{row}">
            <el-input v-model="row.name"
                      size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="中文描述">
          <template slot-scope="{row}">
            <el-input v-model="row.comment"
                      size="small"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否列表中显示"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_show"
                       active-text="是"
                       inactive-text="否"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否为搜索条件"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_search"
                       active-text="是"
                       inactive-text="否"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="搜索匹配模式"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.search_mode"
                       active-text="严格"
                       inactive-text="模糊"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="是否在表单中"
                         align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.is_form"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button v-if="allColumnsList.length!==1" size="small" icon="el-icon-delete"  type="danger" @click="delRow(scope.$index)"></el-button>
            <el-button v-if="scope.$index === allColumnsList.length-1"  size="small" icon="el-icon-plus"  type="success" @click="addRow"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { createCodeAction } from '@/api/system/generator'
export default {
  name: 'all',
  components: {},
  props: {},
  data () {
    return {
      isShow: false,
      // 所有字段数据描述
      allColumnsList: [{
        name: '', // 字段名
        comment: '', // 字段注释
        is_show: 1, // 是否列表中显示
        is_search: 0, // 是否为搜索条件
        search_mode: 1, // 搜索模式，1 严格  0 模糊
        is_form: 1 // 是否在表单中
      }],
      // 创建参数
      actionParams: {
        backController: '', // api接口地址
        frontModule: '', // 前台模块
        frontController: '',
        descKeywords: '' // 前台控制器
      },
      actionParamsRules: {
        backController: [{ required: true, message: '请输入接口地址标识' }], // 接口地址标识
        frontModule: [{ required: true, message: '请输入前台模块' }], // 前台模块
        frontController: [{ required: true, message: '请输入前台控制器' }], // 前台控制器
        descKeywords: [{ required: true, message: '请输入前台控制器' }] // 描述关键文字
      },
      doLoading: false // 是否生成中
    }
  },
  methods: {
    // 生成代码
    async doCreateCode () {
      const valid = await this.$refs.actionParamsRef.validate()
      if (!valid) return this.$message.warning('验证失败')
      this.doLoading = true
      // 发请求
      const data = {
        ...this.actionParams,
        type: 'front',
        allColumnsList: this.allColumnsList
      }
      const res = await createCodeAction(data)
      this.$message.success(res.msg)
      this.tablename = ''
      this.$refs.actionParamsRef.resetFields()
      this.doLoading = false
    },
    // 添加新行
    async addRow () {
      this.allColumnsList.push({
        name: '', // 字段名
        comment: '', // 字段注释
        is_show: 1, // 是否列表中显示
        is_search: 0, // 是否为搜索条件
        search_mode: 1, // 搜索模式，1 严格  0 模糊
        is_form: 1 // 是否在表单中
      })
    },
    // 删除行
    async delRow (idx) {
      try {
        await this.$confirm('确定删除吗？')
        this.allColumnsList.splice(idx, 1)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style scoped>
</style>
